var data = "";
var dataset = '';
$(document).on('pageshow','#graphic-page',function(e,data){    
    getTempForCurve();
});


function getTempForCurve(e){
    var donnee = {
        "action": "getTempForCurve"
    };
    donnee = $(this).serialize() + "&" + $.param(donnee);
    $.ajax({
        type: 'GET',
        url: 'https://tacks.fr/application/action.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        data: donnee,
        crossDomain: true,
        success: function(datas, status){
            console.info("test" + JSON.stringify(datas));  
            if(datas['status'] == 0) {
                data1 = datas['temp'];
                ticks = datas['hours'];
                var options = {
                    series: {
                        lines: {
                            show: true
                        },
                        points: {
                            radius: 5,
                            fill: true,
                            show: true
                        }
                    },
                    xaxis: {
                        axisLabel: "Heures",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: 'Verdana, Arial',
                        axisLabelPadding: 20,
                        ticks: ticks
                    },
                    yaxes: {
                        axisLabel: "Temperature °C",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: 'Verdana, Arial',
                        axisLabelPadding: 5,
                    }, 
                    legend: {
                        noColumns: 0,
                        labelBoxBorderColor: "#000000",
                        position: "nw"
                    },
                    grid: {
                        hoverable: true,
                        borderWidth: 2,
                        borderColor: "#000000",
                        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
                    },
                    colors: ["#0022FF"]
                };
                var dataset = [{ label: "Temperature moyenne 24h - Bureau", data: data1 }];
                $.plot($("#flot-placeholder1"), dataset, options);
                $("#flot-placeholder1").UseTooltip();
            }
            console.log("test3" + datas['status']);     
            console.log("test4" + datas['msg']); 
        },
        error: function(){

        }
    }); 
    return false;
}



var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {
        if (item) {
            if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                previousPoint = item.dataIndex;
                previousLabel = item.series.label;
                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];

                var color = item.series.color;

                //console.log(item);

                showTooltip(item.pageX,  item.pageY,  color,  "<strong>" + item.series.label + "</strong><br>" + y + "°C");
                
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: 200,
        left: 120,
        border: '2px solid ' + color,
        padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    }).appendTo("body").fadeIn(200);
}
